<template>
  <div class="KH_container">
    
    <div class="order-detail-box clearfix d-table bgWhite">
      <div class="f_18">付款信息</div>
      <div class="paddingL30 marginT10">
        <Row :gutter="15">
          <Col :span="7">
            收益预估：
            ￥<span class="f_18 f_bold cBlue">{{info.profit}}</span>
          </Col>
          <Col :span="8">
            分发时间：
            {{info.created_at}}
          </Col>
        </Row>
        <div class="right marginT10">
          <ul class="clearfix">
            <li style="margin-left:0;">
              <label>客户名称：</label>
              <strong class="clue-c-name">
                <span>{{info.company_info?info.company_info.tm_regpeople_name:'暂无'}}</span>
                <a class="icon-search"></a>
              </strong>
            </li>
            <li>
              <label>联系方式：</label>
              <span>{{info.company_info?info.company_info.phone:'暂无'}}</span>
            </li>
            <li>
              <label>电子邮箱：</label>
              <span>{{info.company_info?info.company_info.email:'暂无'}}</span>
            </li>
            <li>
              <label>客户地址：</label>
              <span>{{info.company_info?info.company_info.address:'暂无'}}</span>
            </li>
            <li>
              <label>服务参考价：</label>
              <strong>{{info.ref_fee}}</strong>
              <span
                class="cCCC"
              >
              (官费：{{info.official_fee}}元；服务费：{{info.ref_fee-info.official_fee}}元)
              </span>
            </li>
          </ul>
        </div>
        
      </div>
        
    </div>
    <div class="order-detail-box bgWhite">
      <div class="f_18">专利明细</div>
      <div
        class="paddingL30 marginT10 lineH2"
      > 
          <Row :gutter="15">
            <Col :span="7">专利名称：{{info.patent_name}}</Col>
            <Col :span="6">专利号：{{info.patent_no}}</Col>
            <Col :span="6">专利状态：{{info.state_name}}</Col>
          </Row>
          <Row :gutter="15">
            <Col :span="7">申请日期：{{info.apply_date}}</Col>
            <Col :span="6">授权日期：{{info.authorization_day}}</Col>
            <Col :span="6">专利类型：{{info.patent_type}}</Col>
          </Row>
        
      </div>
    </div>
    <div class="order-detail-box bgWhite">
      <div class="f_18">业务介绍</div>
      <div
        class="paddingL30 marginT10"
      >发明专利有效期为20年，适用新型和外观专利有效期为10年。期满12个月为续费，超过1个月产生滞纳金，超过6个月需要做权利恢复请求。</div>
    </div>
    
    <div class="order-detail-box bgWhite">
      <div class="f_18">缴费明细</div>
      <div
        class="paddingL30 marginT10 lineH2"
      > 
        <template v-for="(val,i) in info.clues">
          <Row :gutter="15">
            <Col :span="7">{{val.clue_type}}</Col>
            <Col :span="3">官费：{{val.official_fee}}</Col>
            <Col :span="3">金额：{{val.ref_fee}}</Col>
            <Col :span="3">预计收益：{{val.profit}}</Col>
            <Col :span="6">截止日期：{{val.limit_date}}</Col>
          </Row>
        </template>
        
      </div>
    </div>

    <div class="order-detail-box clue-remark bgWhite">
      <div class="f_18">
        沟通记录
        <a href="javascript:void(0)" @click="showModel" class="add-remark f_14 marginL10">编辑备注</a>
      </div>
      <div class="paddingL30 lineH2">
        <template v-for="(remarkItem,index) in info.contact_log">
          <Row :gutter="15">
            <Col :span="3" class="cBlue f_16 f_bold">{{remarkItem.type==1?'重要意向':remarkItem.type==2?'一般意向':'暂未接通'}}</Col>
            <Col :span="4">{{remarkItem.created_at}}</Col>
            <Col :span="16">备注：{{remarkItem.remark}}</Col>
          </Row>
        </template>
      </div>
    </div>

    <Modal
      class="boxLbb"
      class-name="vertical-center-modal"
      :mask-closable="false"
      :footer-hide="true"
      v-model="modal1"
      title="添加备注"
      @on-visible-change="vBC"
    >
      <div class="add-remark-form">
        <ul class="clearfix">
          <li :class="{'active':type==1}" @click="type=1">重要意向</li>
          <li :class="{'active':type==2}" @click="type=2">一般意向</li>
          <li :class="{'active':type==3}" @click="type=3">暂无接通</li>
        </ul>
        <div class="r-text">
          <textarea
            v-model="remark"
            placeholder="记录您的备注信息"
            name="remark"
            id="tip-remark"
            maxlength="150"
          ></textarea>
          <span class="word-num">
            <i id="hasLen">{{remark.length}}</i>/150
          </span>
        </div>
        <div class="marginT10 textRight">
          <Button type="primary" @click="add">确定</Button>
        </div>
      </div>
    </Modal>
  </div>
</template>
<style lang="less">
.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .ivu-modal {
    top: 0;
  }
}
</style>
<script>
export default {
  name: "pClueInfo",
  data() {
    
    let{
      $route:{
        query:{
          clue_id
        }
      }
    }=this;

    return {
      modal1: false, //是否显示
      remark: "", // 备注信息
      type: 0, // 备注类型
      clue_id, // 线索lid
      info: "" // 线索详情
    };
  },
  created() {
    this.getClueInfo();
  },
  methods: {
    // 显示model
    showModel() {
      this.modal1 = true;
    },
    // 添加备注
    add() {
      const { clue_id, type, remark } = this;
      if(type!=0){
        $ajax.lb_getPatentClueContactLog({ clue_id, type, remark }, res => {
          $app.toast(res.msg, true);
          this.modal1=false;
          this.getClueInfo(clue_id);
        });
      }else{
        this.$Message.error({content:'请选择意向类型'});
      }
    },
    vBC(buEr){
      if(!buEr){
        this.type=0;
        this.remark='';
      }
    },
    // 获取线索信息
    getClueInfo() {
      let {clue_id}=this;
      $ajax.lb_getPatentClueInfo(clue_id, res => {
        this.info = res.data;
      });
    }
  }
};
</script>

